<template>
  <view class="empty-cart">
    <image class="img" mode="widthFix" src="@/static/image/Artwork.png"></image>
    <view class="title"> {{ t("cart.emptyHint") }}</view>
    <view class="desc"> {{ t("cart.emptyText") }}</view>
    <view
      class="go-shop"
      @click="$jump('/pages/home/index', null, 'reLaunch')"
    >
      {{ t("cart.goShop") }}>></view
    >
  </view>
</template>

<script setup lang="ts">
// 定义i18n
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<style lang="scss" scoped>
.empty-cart {
  height: 100%;
  // margin: 50% auto;
  
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .img {
    width: 29.87%;
    height: 125px;
  }

  .title {
    margin-top: 21px;

    font-size: 18px;
    font-weight: bold;
    line-height: 42.62px;
    letter-spacing: 0px;

    /* 主题色 */
    color: #303030;
  }

  .desc {
    width: 208px;
    height: 36px;

    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0px;

    /* 辅助文字 */
    color: #999999;
  }

  .go-shop {
    margin-top: 21px;

    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0px;
    text-decoration: underline;

    font-feature-settings: "kern" on;
    /* 主色系 */
    color: $subject-color;
  }
}
</style>
